<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>S.ImageZoom Demo</title>
<link href="../../build/cssbase/base-min.css" rel="stylesheet"/>
<script src="../../build/packages/kissy.js"></script>
<script src="imagezoom.js"></script>
<script src="mod-autorender.js"></script>
<style>
    body { padding: 20px 50px 50px; }
    h2 { margin: 10px 0 10px -20px; padding: 5px 10px; font-size: 14px; font-weight: normal; background: #F2F2F2; }

    p.code-switch { color: #09f; cursor: pointer; margin-top: 10px; }
    pre.code {
        color: #444;
        cursor: auto;
        border-left: 2px solid #7F96AA;
        margin-top: 5px;
        padding: 0 10px 20px 10px;
        font-size: 14px;
    }
</style>
<style>
    .demo {
        position: relative;
        width: 310px;
        height: 310px;
        border: 1px solid grey;
    }

    .ks-imagezoom-lens {
        background: url(http://img04.taobaocdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png) repeat;
        cursor: move;
    }

    .ks-imagezoom-icon {
        height: 23px;
        width: 23px;
        border-right: 1px solid #999;
        border-bottom: 1px solid #999;
        background: url(http://img02.taobaocdn.com/tps/i2/T1uJNuXX8tXXXXXXXX-23-23.png) no-repeat scroll left top transparent;
    }

    .ks-imagezoom-viewer {
        border: 1px solid #CCCCCC;
        overflow: hidden;
        text-align: center;
        z-index: 999;
    }
    .ks-imagezoom-loading {
        background: #fff url(assets/loading.gif) no-repeat center center;
    }

</style>
</head>

<body>
<h2>Inner 效果</h2>
<div>
    <img id="inner" src="http://img02.taobaocdn.com/bao/uploaded/i2/T1xbBuXmFXXXctlss__105558.jpg_310x310.jpg" data-ks-imagezoom="http://img02.taobaocdn.com/bao/uploaded/i2/T1xbBuXmFXXXctlss__105558.jpg" />
</div>

<script>
    KISSY.ready(function(S) {

        new S.ImageZoom("#inner", {
            position: 'inner',
            bigImageSize: [650, 487],
            offset: 0,
            lensIcon: false
        });
    });
</script>
<p class="code-switch">显示源码</p>

<script>
    (function() {
        var S = KISSY, DOM = S.DOM,
            SHOW_CODE = '显示源码', HIDE_CODE = '隐藏源码';

        S.all('p.code-switch').each(function(p) {
            p.on('click', function() {
                var showing = (p.text() === SHOW_CODE),
                    next = p.next(),
                    pre = next;

                if (next[0].nodeName !== 'PRE') {
                    pre = S.Node('<pre>');

                    pre.attr('class', 'code')
                        .html(p.prev().html());

                    if (S.UA.ie) {
                        pre.html(pre.html() + '<br />// 请用非 ie 内核浏览器查看。');
                    }

                    DOM.insertAfter(pre[0], p[0]);
                }

                pre.css('display', showing ? 'block' : 'none');
                p.html(showing ? HIDE_CODE : SHOW_CODE);
            });
        });
    })();
</script>
</body>
</html>
